<template>
  <div class="register">
    <h1>注册账号</h1>
    <div class="conter">
      <van-field v-model="tel" type="tel" label="手机号" />
      <van-field
        v-model="sms"
        center
        clearable
        label="短信验证码"
        placeholder="请输入短信验证码"
      >
        <template #button>
          <van-button size="small" type="primary">发送验证码</van-button>
        </template>
      </van-field>
      <van-field v-model="password" type="password" label="密码" />
      <p>密码由6-16位数字，字母或符号组成，至少包含两种字符</p>
    </div>
    <van-checkbox v-model="checked">已阅读并同意《帐号使用协议》&《隐私政策》</van-checkbox>
    <van-button type="primary" size="large">立即注册</van-button>
  </div>
</template>

<script>
export default {
  name: 'Register',
  data() {
    return {
      tel: '',
      password: '',
      checked: true,
    }
  },
}
</script>

<style lang="less" scoped>
  .register{
    padding: .66667rem .66667rem 0;

    h1{
      text-align: center;
    }

    .conter{
      margin-top: 60px;
      height: 260px;

      .van-field{
        border-radius: 10px;
        background: rgb(236, 232, 232);
        margin-bottom: 20px;
      }

      p{
        font-size: 13px;
        color: #ccc;
      }
    }

    .van-checkbox{
      font-size: 14px;
      margin-bottom: 40px;

      .van-checkbox__label{
        color: #ccc;

      }
    }

    .van-button{
      border-radius: 10px;
    }
  }
</style>
